import * as React from 'react';
import {
  Button,
  Image,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { DataTable, Dialog, Paragraph, Portal, Provider } from 'react-native-paper';
import {
  DOMAIN_URL,
  deptInfoGet,
  noticeUnread,
  newsList,
  eventList,
  studyList,
  newsRecent,
  getCurrentUserInfo,
  getTotalPointsPs,
  getMouthPointsPs,
  getTotalPointsRankPs,
  getMouthPointsRankPs,
} from '../util/api';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState } from 'react';
import { style } from '../theme';
import { PAGENAME } from '../util/PageName';

class MineScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        loginName: '',
        deptName: '研发部门',
        groupName: '测试党小组',
        userName: '管理员',
        isAdmin: '',
      },
      total: "*",
      month: "*",
      totalRank: "*",
      monthRank: "*",
    };

  }

  componentDidMount() {
    this.subscription = this.props.navigation.addListener('focus', () => {
      // do something
      console.log('event detail');
      this.initPage();
    });
  }

  componentWillUnmount() {
    this.subscription();
  }

  //初始化
  initPage = async () => {
    // 处理登录逻辑
    getCurrentUserInfo(null).then(async res => {
      // setCurrentUserInfo(res.data);
      console.log('user login info', res);
      console.log('user login info', res.data);

      let user = res.data
      user['isAdmin'] = global.USER.isadmin
      this.setState({
        user: res.data
      })
    }).then(() => {
      const currUser = this.state.user
      getTotalPointsPs(currUser.loginName).then(async res => {
        // scoreInfo.total = res.data;
        this.setState({
          total: res.data
        })
      });
      getMouthPointsPs(currUser.loginName).then(async res => {
        // scoreInfo.month = res.data;
        this.setState({
          month: res.data
        })
      });
      getTotalPointsRankPs(null).then(async res => {
        console.log(res);
        this.setState({
          totalRank: this.getRank(currUser.loginName, res.data)
        })
      });
      getMouthPointsRankPs(null).then(async res => {
        this.setState({
          monthRank: this.getRank(currUser.loginName, res.data)
        })
      });
    })
  };

  // 排序函数
  getRank = (value, Items) => {
    for (let i = 0; i < Items.length; i++) {
      if (Items[i].userInfo.loginName === value) {
        return Items[i].pointRank;
      }
    }
    return 0;
  };

  render() {
    const { navigation } = this.props;
    const { user, total, month, totalRank, monthRank } = this.state
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView style={{}}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-around',
            }}>
            <View style={styles.scoreTotal}>
              <Image
                style={{ width: 60, height: 60, alignSelf: 'center', borderRadius: 30 }}
                source={{
                  uri: `${DOMAIN_URL}/file/images/touxiang.jpg`
                }}
              />
              {/* <Image style={{ width: 45, height: 45 }} source={require('../assets/images/bg.jpg')} /> */}
            </View>
            {/*总积分*/}
            <View style={styles.scoreTotal}>
              <Text>总积分:{total}</Text>
              <Text>排名:{totalRank}</Text>
            </View>
            {/*月积分*/}
            <View style={styles.scoreTotal}>
              <Text>月积分:{month}</Text>
              <Text>排名:{monthRank}</Text>
            </View>
          </View>
          <View style={{ marginTop: 16, marginBottom: 16, marginLeft: 8 }}>
            <View style={styles.userRow}>
              <Text style={styles.label}>姓名:</Text>
              <Text style={styles.value}>{user.userName}</Text>
            </View>
            <View style={styles.userRow}>
              <Text style={styles.label}>部门:</Text>
              <Text style={styles.value}>{user.deptName}</Text>
            </View>
            <View style={styles.userRow}>
              <Text style={styles.label}>小组:</Text>
              <Text style={styles.value}>{user.groupName}</Text>
            </View>
            <View style={styles.userRow}>
              <Text style={styles.label}>密码:</Text>
              <Text style={styles.value}>{"******"}</Text>
            </View>
          </View>
          <View style={{ flexDirection: 'row', alignSelf: 'center', marginTop: 30 }}>
            <View style={{ width: 75 }}>
              <Button
                title="修改"
                onPress={() => {
                  navigation.push(PAGENAME.USER_EDIT, { userId: user.loginName });
                }}
              />
            </View>
            <View style={{ width: 10 }}>
            </View>
            <View style={{ width: 75 }}>
              <Button
                title="注销"
                onPress={() => {
                  navigation.reset({
                    index: 0,
                    routes: [{ name: PAGENAME.LOGIN }],
                  })
                }}
              />
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
    // </ImageBackground>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // paddingTop: StatusBar.currentHeight,
  },
  scoreTotal: {
    marginTop: 16,
    paddingVertical: 40,
    // marginLeft: 35
  },
  label: {
    width: 90,
    marginLeft: 20,
    fontSize: 16,
    fontWeight: '600'
  },
  value: {
    marginLeft: 16,
    fontSize: 16,
    fontWeight: '600'
  },
  userRow: {
    flexDirection: 'row',
    margin: 4,
    marginBottom: 10,
    borderStyle: 'solid',
    borderColor: '#000',
    borderWidth: 1,
    borderRadius: 4,
    padding: 8,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 48,
  }
});

export default MineScreen;
